<template>
  <div>
    <div class="top-panel">
      <el-form :model="searchFormData" label-width="50px">
        <el-row>
          <el-col :span="5">
            <el-form-item prop="titleFuzzy" label="标题 ">
              <el-input
                placeholder="请输入博客标题"
                v-model.trim="searchFormData.titleFuzzy"
                clearable
                @keydown.enter="loadDataList"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="5" :style="{ 'padding-left': '10px' }">
            <el-button type="danger" @click="loadDataList">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <Table
      :columns="columns"
      :showPagination="true"
      :dataSource="tableData"
      :fetch="loadDataList"
      :options="tableOptions"
    >
      <!-- 文章信息 -->
      <template #blogInfo="{ index, row }">
        <div>标题:{{ row.title }}</div>
        <div>分类:{{ row.categoryName }}</div>
        <div>作者:{{ row.nickName }}</div>
      </template>
      <!-- 类型 -->
      <template #typeName="{ index, row }">
        <div>
          类型: <span v-if="row.type == 0">原创</span>
          <span v-if="row.type == 1">转载</span>
        </div>
        <div v-if="row.type == 1">转载地址:{{ row.reprintUrl }}</div>
      </template>
      <template #cover="{ index, row }">
        <Cover :cover="row.cover"></Cover>
      </template>
      <!-- 文章信息 -->
      <template #time="{ index, row }">
        <div>发布时间:{{ row.createTime }}</div>
        <div>更新时间:{{ row.lastUpdateTime }}</div>
      </template>
      <template #op="{ index, row }">
        <div class="op">
          <a
            href="javascript:void(0)"
            class="a-link"
            @click="showBlogDetail(row)"
            >预览</a
          >
          <el-divider direction="vertical" />
          <a
            href="javascript:void(0)"
            :class="
              userInfo.roleType === 1 || row.userId === userInfo.userId
                ? 'a-link'
                : 'disabled-link'
            "
            @click="reductionBlog(row)"
            >还原</a
          >
          <el-divider direction="vertical" />
          <a
            href="javascript:void(0)"
            :class="
              userInfo.roleType === 1 || row.userId === userInfo.userId
                ? 'a-link'
                : 'disabled-link'
            "
            @click="delBlog(row)"
            >删除</a
          >
        </div>
      </template>
    </Table>
    <BlogDetail ref="blogDetailRef" @callback="loadDataList"></BlogDetail>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { getCurrentInstance, reactive, ref } from "vue";
import BlogDetail from "./BlogDetail.vue";
import { useStore } from "vuex";
const api = {
  loadCategory: "/category/loadAllCategory4Blog",
  loadDataList: "blog/loadRecoveryList",
  delBlog: "blog/delBlog",
  reductionBlog: "blog/reductionBlog",
};
const { proxy } = getCurrentInstance();
const searchFormData = reactive({});
const categoryList = ref([]);
const userInfo = ref(proxy.VueCookies.get("userInfo"));

const columns = [
  {
    label: "封面",
    prop: "cover",
    width: 130,
    scopedSlots: "cover",
  },
  {
    label: "文章信息",
    prop: "blogInfo",
    width: 300,
    scopedSlots: "blogInfo",
  },
  {
    label: "编辑器",
    prop: "editorTypeName",
    width: 150,
  },
  {
    label: "类型",
    prop: "typeName",
    width: 200,
    scopedSlots: "typeName",
  },
  {
    label: "评论",
    prop: "allowCommentTypeName",
    width: 80,
  },
  {
    label: "时间",
    prop: "time",
    width: 300,
    scopedSlots: "time",
  },
  {
    label: "操作",
    prop: "op",
    width: 150,
    scopedSlots: "op",
  },
];

const tableData = reactive({});
// 分页选择栏的高度
const tableOptions = { extHeight: 38 };
const loadDataList = async () => {
  let params = {
    pageNo: tableData.pageNo,
    pageSize: tableData.pageSize,
  };
  Object.assign(params, searchFormData);
  let result = await proxy.Request({
    url: api.loadDataList,
    params,
  });
  if (!result) {
    return;
  }
  // console.log(result.data);
  Object.assign(tableData, result.data);
  // tableData.list = result.data;
};

const loadCategoryList = async () => {
  let result = await proxy.Request({
    url: api.loadCategory,
  });
  if (!result) {
    return;
  }
  categoryList.value = result.data;
};
loadCategoryList();

// window 新增，取消
const windowConfig = reactive({
  show: false,
  title: "标题",
  buttons: [
    {
      type: "danger",
      text: "确定",
      click: (e) => {
        console.log("click");
      },
    },
  ],
});
// 关闭编辑博客的界面并刷新
const closeWindow = () => {
  windowConfig.show = false;
  loadDataList();
};
const blogDetailRef = ref(null);
const blogEditRef = ref(null);
// 修改或新增博客
const showEditBlog = (type, data) => {
  blogEditRef.value.init(type, data);
};
const showBlogDetail = (data) => {
  blogDetailRef.value.init(data);
};

// 刪除博客
const delBlog = (data) => {
  proxy.Confirm(`你確定要彻底删除[${data.title}]嗎？`, async () => {
    let result = await proxy.Request({
      url: api.delBlog,
      params: {
        blogId: data.blogId,
      },
    });
    if (!result) {
      return;
    }
    loadDataList();
    ElMessage.success("博客删除成功");
  });
};

// 恢复博客
const reductionBlog = (data) => {
  proxy.Confirm(`你確定要恢复[${data.title}]嗎？`, async () => {
    let result = await proxy.Request({
      url: api.reductionBlog,
      params: {
        blogId: data.blogId,
      },
    });
    if (!result) {
      return;
    }
    loadDataList();
    ElMessage.success("博客恢复成功");
  });
};
</script>

<style lang="scss" scoped></style>
